<template>
  <div class="infinite-container" id="judge">
    <div class="bgwhite">
      <left-border-title :title="'请对本次服务进行评价'"></left-border-title>
      <div
        class="flex judgeStar"
        v-for="(value, index) in starList"
        :key="index"
        v-if="starList.length && isScoreService"
      >
        <span>{{value.title}}</span>
        <rate :size="20" :score="defaultScore[index]" :inputIndex="index" @rate="rateResult"></rate>
      </div>
      <div class="flex" v-if="isContentService">
        <textarea
          placeholder="关于本次服务您还有什么想说的?"
          v-model="contentText"
          rows="6"
          maxlength="100"
          class="reasonTextarea"
        ></textarea>
      </div>
      <div class="labelList" v-if="labelList.length && isLabelService">
        <ul class="flex wrap">
          <li
            v-for="(value, index) in labelList"
            :key="index"
            :class="{activeLi: value.ischoosed}"
            @click="chooseLabel(value)"
          >{{value.title}}</li>
        </ul>
      </div>
    </div>
    <div class="longBtnC">
      <mu-raised-button label="提 交" fullWidth primary @click="submit"></mu-raised-button>
    </div>
  </div>
</template>

<script>
import leftBorderTitle from "../../components/leftBorderTitle.vue";
import rate from "../../components/BsRate.vue";
import { RESTFUL_API, commonAjaxJson } from "../../api/api";
export default {
  data() {
    return {
      defaultScore: [],
      activeIndex: 0,
      starList: [],
      labelList: [],
      isContentService: 0,
      isLabelService: 0,
      isScoreService: 0,
      baseInfo: "",
      contentText: "",
      templateId: 1,
    };
  },
  components: { leftBorderTitle, rate },
  mounted() {
    this.baseInfo = this.$route.query;
    //模板ID  1图文咨询，2云诊室，3复诊配药
    if (this.baseInfo.consultType == "returnVisit") {
      this.templateId = 3;
    } else if ((this.baseInfo.consultType = "imageAble")) {
      this.templateId = 1;
    } else {
      this.templateId = 2;
    }
    this.queryTemplate();
  },
  methods: {
    chooseLabel(value) {
      value.ischoosed = !value.ischoosed;
    },
    rateResult(obj) {
      this.defaultScore[JSON.parse(obj).inputIndex] = JSON.parse(obj).result;
      this.starList[JSON.parse(obj).inputIndex].score =
        JSON.parse(obj).result * 2;
    },
    queryTemplate() {
      
      commonAjaxJson(RESTFUL_API.queryTemplate, { templateId: this.templateId }, true).then(
        res => {
          
          if (res.data.code == 200) {
            if (!res.data.data.isService) {
              this.$store.commit("UPDATE_TOAST", {
                message: "当前评价未开启",
                fn: () => {
                  setTimeout(function() {
                    window.history.go(-1);
                  }, 2000);
                }
              });
            } else {
              if (res.data.data.scoreList && res.data.data.scoreList.length) {
                this.starList = res.data.data.scoreList;
              }
              if (res.data.data.labelList && res.data.data.labelList.length) {
                for (let i in res.data.data.labelList) {
                  res.data.data.labelList[i].ischoosed = false;
                }
                this.labelList = res.data.data.labelList;
              }
              this.isContentService = res.data.data.isContentService;
              this.isLabelService = res.data.data.isLabelService;
              this.isScoreService = res.data.data.isScoreService;
            }
          } else {
            this.$store.commit("UPDATE_TOAST", { message: "服务报错" });
          }
        }
      );
    },
    submit() {
      if (!!this.isContentService && this.contentText.length > 100) {
        this.$store.commit("UPDATE_TOAST", {
          message: "内容不能超出100字"
        });
        return;
      }

      let param = {
        templateId: this.templateId,
        correlationId: this.baseInfo.consultId,
        doctorCode: this.baseInfo.doctCode,
        doctorName: this.baseInfo.doctName,
        doctorId: this.baseInfo.doctId,
        content: this.contentText,
        labelList: "",
        scoreList: "",
        userId: sessionStorage.getItem("userId")
      };
      let selLabelList = [];
      for (let i in this.labelList) {
        if (this.labelList[i].ischoosed) {
          selLabelList.push({
            id: this.labelList[i].id
          });
        }
      }
      let selScoreList = [];
      let isRate = true;
      for (let i in this.starList) {
        if (!this.starList[i].score || this.starList[i].score == 0) {
          isRate = false;
        }
        selScoreList.push({
          id: this.starList[i].id,
          score: this.starList[i].score
        });
      }
      param.labelList = JSON.stringify(selLabelList);
      param.scoreList = JSON.stringify(selScoreList);
      console.log(JSON.stringify(param));
      if (!isRate) {
        this.$store.commit("UPDATE_TOAST", { message: "请进行评分" });
        return;
      }
      
      commonAjaxJson(RESTFUL_API.submitJudgeForm, param, true).then(res => {
        
        if (res.data.code == 200) {
          this.$store.commit("UPDATE_TOAST", { message: "评价成功!" });
          window.history.go(-1);
        } else {
          this.$store.commit("UPDATE_TOAST", { message: res.data.message });
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
@import "../../common/css/flex.css";
@import "../../common/css/vars";
.reasonTextarea {
  outline: none;
  border: 1px solid @color-border;
  width: 100%;
  margin: 10px;
}
.labelList {
  padding: 10px;
  li {
    color: @color-primary;
    border: 1px solid @color-primary;
    border-radius: 14px;
    height: 28px;
    line-height: 28px;
    width: 106px;
    text-align: center;
    margin: 5px;
    box-sizing: border-box;
  }
  .activeLi {
    background-color: @color-primary;
    color: white;
  }
}
.judgeStar {
  padding: 0 10px 10px 10px;
  span {
    width: 90px;
    color: #8f8f8f;
  }
}
.longBtnC {
  height: 50px;
  width: 100%;
  position: absolute;
  bottom: 0;
}
</style>
<style lang="less">
@import "../../common/css/vars";
.mu-text-field {
  width: 100%;
  border: 1px solid @color-border;
  margin: 10px;
  padding: 5px;
  box-sizing: border-box;
}
#judge .mu-raised-button {
  height: 50px;
  line-height: 50px;
}
</style>
